axios.defaults.baseURL = 'http://ajax-api.itheima.net'
const list = document.querySelector('.top')

// axios.get('/api/category/top')
// .then(({data:res}) => {
//    console.log(res.data); 
//   const response = res.data.map((item) => {
//     return axios.get('/api/category/sub?id='+item.id)
//    })
//    return Promise.all(response)
// }).then(res => {
//   list.innerHTML =  res.map(({data:item}) => {
//       console.log(item);
//       return `<li>
//       <a href="javascript:;">${item.data.name}</a>
//       <ul class="sub">
//       ${item.data.children.map((item) => {
//         return `<li>
//                   <a href="javascript:;">
//                     <span>${item.name}</span>
//                     <img src=${item.picture} alt="">
//                   </a>
//                 </li>`
//     }).join('')}
//       </ul>
//     </li>` 
//     }).join('')
// })

const render = async () => {
   const response = await axios.get('/api/category/top')
    const {data:res}= response
    const realData = res.data.map((item) => {
      return axios.get('/api/category/sub?id='+item.id)
    })
    const realData02 = await Promise.all(realData)
      list.innerHTML = realData02.map(({data:item}) => {
        console.log(item);
        return `<li>
        <a href="javascript:;">${item.data.name}</a>
        <ul class="sub">
        ${item.data.children.map((item) => {
          return `<li>
                    <a href="javascript:;">
                      <span>${item.name}</span>
                      <img src=${item.picture} alt="">
                    </a>
                  </li>`
      }).join('')}
        </ul>
      </li>` 
      }).join('')
    }
render()

